<template>
    <div id="cldFrame">
      <div id="time">{{time}}</div>
      <div id="cldBody">
        <table>
          <thead>
          <tr>
            <td colspan="7">
              <div id="top">
                <span id="left">&lt;</span>
                <span id="topDate"></span>
                <span id="right">&gt;</span>
              </div>
            </td>
          </tr>
          <tr id="week">
            <td>日</td>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
            <td>六</td>
          </tr>
          </thead>
          <tbody id="tbody">
          </tbody>
        </table>
      </div>
    </div>
</template>

<script>
export default {
  name: "Calendar",
  data(){
    return {
      time:"00:00:00"
    }
  },
  mounted() {
      /*显示时间*/
      (function (that){
        // var time = document.querySelector("#time")
        setInterval(()=>{
          var date = new Date()
          var h = date.getHours()<10 ? '0'+date.getHours():date.getHours()
          var m = date.getMinutes()<10 ? '0'+date.getMinutes():date.getMinutes()
          var s = date.getSeconds()<10 ? '0'+date.getSeconds():date.getSeconds()
          // time.innerHTML = h + ':' + m + ':' + s
          that.time = h + ':' + m + ':' + s;
        },1000)
      })(this)
      /*判断某年是否是闰年*/
      function isLeap(year) {
        if((year%4==0 && year%100!=0) || year%400==0){
          return true;
        }
        else{
          return false;
        }
      }
      var monthDay = [31,0,31,30,31,30,31,31,30,31,30,31];
      /*判断某年某月某日是星期几，默认日为1号*/
      function whatDay(year, month, day=1) {
        var sum = 0;
        sum += (year-1)*365+Math.floor((year-1)/4)-Math.floor((year-1)/100)+Math.floor((year-1)/400)+day;
        for(var i=0; i<month-1; i++){
          sum += monthDay[i];
        }
        if(month > 2){
          if(isLeap(year)){
            sum += 29;
          }
          else{
            sum += 28;
          }
        }
        return sum%7;      //余数为0代表那天是周日，为1代表是周一，以此类推
      }
      /*显示日历*/
      function showCld(year, month, firstDay){
        var i;
        var tagClass = "";
        var nowDate = new Date();

        var days;//从数组里取出该月的天数
        if(month == 2){
          if(isLeap(year)){
            days = 29;
          }
          else{
            days = 28;
          }
        }
        else{
          days = monthDay[month-1];
        }

        /*当前显示月份添加至顶部*/
        var topdateHtml = year + "年" + month + "月";
        var topDate = document.getElementById('topDate');
        topDate.innerHTML = topdateHtml;

        /*添加日期部分*/
        var tbodyHtml = '<tr>';
        for(i=0; i<firstDay; i++){//对1号前空白格的填充
          tbodyHtml += "<td></td>";
        }
        var changLine = firstDay;
        for(i=1; i<=days; i++){//每一个日期的填充
          if(year == nowDate.getFullYear() && month == nowDate.getMonth()+1 && i == nowDate.getDate()) {
            tagClass = "curDate";//当前日期对应格子
          }
          else{
            tagClass = "isDate";//普通日期对应格子，设置class便于与空白格子区分开来
          }
          tbodyHtml += "<td class=" + tagClass + ">" + i + "</td>";
          changLine = (changLine+1)%7;
          if(changLine == 0 && i != days){//是否换行填充的判断
            tbodyHtml += "</tr><tr>";
          }
        }
        if(changLine!=0){//添加结束，对该行剩余位置的空白填充
          for (i=changLine; i<7; i++) {
            tbodyHtml += "<td></td>";
          }
        }//实际上不需要填充后方，但强迫症必须整整齐齐！
        tbodyHtml +="</tr>";
        var tbody = document.getElementById('tbody');
        tbody.innerHTML = tbodyHtml;
      }
      var curDate = new Date();
      var curYear = curDate.getFullYear();
      var curMonth = curDate.getMonth() + 1;
      showCld(curYear,curMonth,whatDay(curYear,curMonth));
      function nextMonth(){
        var topStr = document.getElementById("topDate").innerHTML;
        var pattern = /\d+/g;
        var listTemp = topStr.match(pattern);
        var year = Number(listTemp[0]);
        var month = Number(listTemp[1]);
        var nextMonth = month+1;
        if(nextMonth > 12){
          nextMonth = 1;
          year++;
        }
        document.getElementById('topDate').innerHTML = '';
        showCld(year, nextMonth, whatDay(year, nextMonth));
      }
      function preMonth(){
        var topStr = document.getElementById("topDate").innerHTML;
        var pattern = /\d+/g;
        var listTemp = topStr.match(pattern);
        var year = Number(listTemp[0]);
        var month = Number(listTemp[1]);
        var preMonth = month-1;
        if(preMonth < 1){
          preMonth = 12;
          year--;
        }
        document.getElementById('topDate').innerHTML = '';
        showCld(year, preMonth, whatDay(year, preMonth));
      }
      document.getElementById('right').onclick = function(){
        nextMonth();
      }
      document.getElementById('left').onclick = function(){
        preMonth();
      }


  },
}
</script>

<style>
#cldFrame{
  position: relative;
  background-color: #41a8a5;
  /*margin: 0px auto;*/
}
#time{
  padding-top: .5rem;
  color: chartreuse;
  text-align: center;
}
#cldBody{
  position: relative;
  width: 100%;
}
#cldBody table{
  width: 100%;
  background-color: #41a8a5;
}
#top{
  text-align: center;
  line-height: 3rem;
}
#topDate{
  font-size: 1rem;
}

#week td{
  font-size: 1rem;
}
#tbody td{
  height: 1rem;
  width: 1rem;
  text-align: center;
  font-family: Simsun;
  font-size: .9rem;
}
.curDate{
  color: red;
  font-weight: bold;
  border-radius: .5rem;
  background-color: yellow;
}
#left, #right{
  position: absolute;
  padding: 0 1rem;
}
#left{left: 0px;}
#right{right: 0px;}
#left:hover, #right:hover{
  background-color: rgba(30, 30, 30, 0.2);
}
</style>